<script setup lang="ts">
import { AddressResult, getMemberAddress } from '@/apis/goods'
import { onMounted, ref, watch } from 'vue';
const addressList = ref<AddressResult[]>()
onMounted(async () => {
  addressList.value = await getMemberAddress()
})

const index = ref<number>(0)
const checkAddress = (i: number) => {
  index.value = i
}
const addAddress = () => {
  uni.navigateTo({
    url: "/pages/my/address/index"
  })
}
const props = defineProps<{
  isShow: boolean
}>()
const emit = defineEmits<{ (e: 'update:modelValue', value: AddressResult): void }>()
watch(() => props.isShow, (nVal) => {
  // console.log('[ nVal ] >', nVal)
  if (!nVal) {
    if (addressList.value) {
      emit('update:modelValue', addressList.value[index.value])
    }
  }
})
</script>
<template>
  <view class="title">配送至</view>
  <view class="shipment">
    <view class="item" v-for="(item, i) in  addressList " :key="item.id" @click="checkAddress(i)">
      <view class="user">{{ item.receiver }} {{ item.contact }}</view>
      <view class="address">{{ item.address }}</view>
      <text class="icon" :class="{ 'icon-checked': index === i }"></text>
    </view>
  </view>
  <view class="footer">
    <view class="button primary" @click="addAddress"> 新建地址 </view>
    <view v-if="false" class="button primary">确定</view>
  </view>
</template>

<style>
.shipment {
  min-height: 300rpx;
  max-height: 540rpx;
  overflow: auto;
  padding: 20rpx 10rpx !important;
}

.shipment .item {
  padding: 30rpx 50rpx 30rpx 60rpx;
  background-size: 40rpx;
  background-repeat: no-repeat;
  background-position: 0 center;
  background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/locate.png);
  position: relative;
}

.shipment .item .icon {
  color: #999;
  font-size: 40rpx;
  transform: translateY(-50%);
  position: absolute;
  top: 50%;
  right: 0;
}

.shipment .item .icon-checked {
  color: #27ba9b;
}

.shipment .item .icon-ring {
  color: #444;
}

.shipment .item .user {
  font-size: 28rpx;
  color: #444;
  font-weight: 500;
}

.shipment .item .address {
  font-size: 26rpx;
  color: #666;
}
</style>
